<!-- 分享图片生成 -->
<template>
    <div class="container">
        <div class="share-img">
            <img :src="imgUrl" alt="分享图" >
        </div>
        <div class="creat-img" ref="box">
            <!-- <img src="../assets/beijing.png" alt="分享背景图"> -->
            <div id="qrcode" class="qrcode"></div>
            <div class="ShareWithUs">扫码加入我们</div>
        </div>
    </div>
</template>
<script>
import { qrcanvas } from 'qrcanvas';
import html2canvas from 'html2canvas';
import $ from "jquery"
export default {
    name:'code',
    data () {
        return {
            imgUrl:'https://shixiaozhang.cn/activity/wxshare/course_record#/join',
            
        }
    },
    watch:{
        imgUrl(val,oldval){
            //监听到imgUrl有变化以后 说明新图片已经生成 隐藏DOM
            this.$refs.box.style.display = "none";
        }
    },
    created() {
        let that = this;
        that.$nextTick(function () {
           //生成二维码
           var canvas1 = qrcanvas({
                // data: decodeURIComponent(that.$route.query.url),
                data:'https://shixiaozhang.cn/activity/wxshare/course_record#/index',
                size:60
            });
            document.getElementById("qrcode").innerHTML = '';
            document.getElementById('qrcode').appendChild(canvas1);
 
            //合成分享图
            that.$indicator.open({
                text: '正在生成图片...',
                spinnerType: 'fading-circle'
            });
            html2canvas(that.$refs.box).then(function(canvas) {
                that.imgUrl =  URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))                
                setTimeout(()=>{
                    that.$indicator.close(); 
                    that.$toast({
                        message: '图片已生成，长按保存分享给你的好友吧',
                        position: 'middle',
                        duration: 3000
                    });                   
                },2000)
            });
       })
    //      $("#qrcode").on({  
    //     touchstart: function(e) { 
    //         // 长按事件触发  
    //         timeOutEvent = setTimeout(function() {  
    //             timeOutEvent = 0;  
    //         }, 400);  
    //         //长按400毫秒   
    //         // e.preventDefault();    
    //     },  
    //     touchmove: function() {  
    //         clearTimeout(timeOutEvent);  
    //         timeOutEvent = 0;  
    //     },  
    //     touchend: function() {  
    //         clearTimeout(timeOutEvent);  
    //         if (timeOutEvent != 0) {  
    //             // 点击事件  
    //              location.href = 'https://shixiaozhang.cn/activity/wxshare/course_record#/index';   
    //         }  
    //         return false;  
    //     }  
    // }) 
    },
      mounted (){
          var x = 0;//用于记录clientX
         var y = 0;//用于记录clientY
         var  z = 0;//用于判断，是否是已按住并超过了设定时间。
      var timer1 = null;//用于定时器
      let oDiv = document.getElementById('qrcode');
      // 因为长按事件要加在div#canvas上的，如果事件是任何地方的话，就是document
 
      /* 添加touchstart，手指触摸事件 */
      oDiv.addEventListener("touchstart", function(e) {
          /* 阻止默认事件，其实这里ie的兼容写法returnValue没必要*/
          if (e.preventDefault) e.preventDefault();
          else e.returnValue = false;
          /* 移动时触发touchmove导致多个touches对象，所以可以直接跳出*/
          if (e.touches.length > 1) {
            return false;
          }
          /* 这里有历史渊源的，是第二次点击的时候，把z的值还原。*/
          z = 0;
          /* 手指一旦触摸屏幕，就开启一个倒计时定时器timer1 */
          timer1 = setTimeout(function() {
            z = 1; // 如果倒计时结束还没有清楚定时器的话，就把z赋值为1，这样，当判断z=1就说明按住屏幕的时间达到了开发者设定的长按时间。也就是满足了长按事件
          }, 500);
          /* 手指一旦触摸屏幕，要立即做的第二件事：记录触摸时的点的位置，并存在x，y两个变量里*/
          x = e.touches[0].clientX;
          y = e.touches[0].clientY;
      }, false);
 
      /* 绑定第二个事件touchmove，手指在屏幕上连续滑动时连续地触发*/
      oDiv.addEventListener("touchmove", function(e) {
          if (e.preventDefault) e.preventDefault();
          else e.returnValue = false;
          /*判断，因为每次手指移动会连续触发touchmove，也就会不停的往event事件对象里边添加“跟踪触摸属性touches”*/
          //这个属性是一个数组，每次新添加的都会在最前边。所以每次获取数组里边的第一个对象对应的clientX和clientY，就是实时的移动点的位置
          //找这个点的作用，就是为了监听用户，是否按住还移动了。如果移动了，那不能算长按事件（不过这个也看产品需求，如果按住也要触发长按规定那个逻辑的话，这不要判断）
          if (x != e.touches[0].clientX || y != e.touches[0].clientY) {
            // 具体的判断方法，还记得touchstar那里已经记录了'起跑点'了，只要和x，y的值进行比较，与两个的值有任意一个不等，就是移动了。
            // 那么移动的话，先要清除事先埋伏的定时器timer1.要不然，虽然不是长按事件但是倒计时还在进行中。
            clearTimeout(timer1);
            return false;//除掉'后患'后，安心的结束本次用户的触摸事件监听。
          }
      }, false);
 
      /* 添加第三个触摸事件touchend，这个事件的场景就是用户手指从屏幕拿开时触发*/
      oDiv.addEventListener("touchend", function(e) {
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        /* 上文已经介绍，当用户拿开的时候，只要判断用户从点击到拿开的时间。而记录时间长度比较麻烦，所以当时用了定时器，设定了一个我们想要的时间，时间到了就改变一个状态值z，所以这里我们只要判断z是否被改变即可*/
        if (z != 1) {
          /* 如果用户手指头拿开的时候，z还是0，即不等于1，说明定时器还没被触发，也就说明没有达到长按的时间，那么不用期待了，同touchmove寿终正寝时要做的一样，清除定时器即可。*/
          clearTimeout(timer1);
          /* 但是，touchend和touchmove还有一点不一样的，touchend是end（废话），touchmove不管move多少次，最终手指总要从屏幕拿开的，这就是他的关键点。而拿开就是结束，结束，是整个这次触摸生命过程的结束。*/
          /* 所以，end还要做的事是初始化，是还原。他需要把x，y的值归为原始。以为了下次再次触发touchstart时做准备。好感人的故事。*/
          x = 0;
          y = 0;
          return false;//然后安心的“死去”。
        } else if(z=1){
          /* 如果，触发了长按事件，终于触发了长按事件！*/
          /* 他还是不能得意忘形，在大展宏图之前，还是要做点准备，打扫一下战场，将各个变量初始化 */
          x = 0;
          y = 0;
          z = 0;
         this.$router.go(-1)
        }
      }, false);
    },
    methods: {
        //base64转blob
        base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
 
            let uInt8Array = new Uint8Array(rawLength);
 
            for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        },
    }
}
 
</script>
<style lang='scss' scoped>
.qrcode{
    width: 20%;
    margin-left:40%;
    height: 70%;
    margin-top: 5%;
}
  .share-img{
        display:none;
    }
.creat-img{
      
    img{
        z-index: 3;
    }
    .qrcode{
        // position: absolute;
        // bottom: .15rem;
        // left: 50%;
        // margin-left: -64px;
        // z-index: 5;
    }
}
.ShareWithUs{
    width: 40%;
    margin-left:30%;
    text-align: center;
    margin-bottom: 2%;
    color: #222840;
    font-family:"FZCHYJW--GB1-0";
    font-weight: 800;
    font-size: .2rem;
}
 
</style>